import React from 'react';
import { Collapse, Tag } from 'antd';
const { Panel } = Collapse;
import { CaretRightOutlined } from '@ant-design/icons';
export default function ActivityInfo({activityInfo, votes}) {
  /** 填写的信息 */
  const InfoRender = () => {
    if(!activityInfo[0]?.requiredEntryForms) return
    const tags = activityInfo[0].requiredEntryForms.map(item => item.key)
     return tags.map((item, index) => (
        <Tag key={index}>{item}</Tag>
      ))
  }
  /** 补充项目 */
  const addItems = () => {
    if(!activityInfo[0]?.optionalEntryForms) return
    const item = activityInfo[0].optionalEntryForms.map(item => item.key)
    return item.map((v, i) => <span key={i}>{v}</span>)
  }
  /** 投票对象 */
  const voteObj = () => {
      const obj = votes[0].voteObjectVOS
      return obj.map(item => (
        <div key={item.id}>
          <p>姓名: {item.name}</p>
          <p>说明: {item.instructions}</p>
          <div style={{display: 'flex', alignItems: 'center'}}>
            <p style={{marginRight: 20}}>图片: </p>
            <img alt=""
                src={item.pictureUrl}
                style={{width: 100, height: 100}}
            />
          </div>
        </div>
      ))
  }
  return (
    <>
      {
          activityInfo.length
            ? <Collapse
                    bordered={false}
                    className="site-collapse-custom-collapse"
                    expandIcon={({ isActive }) => (
              <CaretRightOutlined rotate={isActive ? 90 : 0} />
            )}
                    expandIconPosition="right"
                    ghost
              >
            <Panel
                className="site-collapse-custom-panel"
                header={<b style={{fontSize: '20px'}}>报名</b>}
                key="1"
            >
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{width: 5, height: 20, borderRadius: 5, background: '#1a257a'}}></div>
                <div style={{fontSize: 16, fontWeight: 700, paddingLeft: 10}}>基本信息</div>
              </div>
              <div style={{padding: '5px 0 0 20px' }}>
                <p>活动时间: &nbsp;&nbsp; {activityInfo[0]?.startDate} ~ {activityInfo[0]?.endDate || ''}</p>
                <p>报名人数: &nbsp;&nbsp; {activityInfo[0]?.numberLimit || ''} </p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{width: 5, height: 20, borderRadius: 5, background: '#1a257a'}}></div>
                <div style={{fontSize: 16, fontWeight: 700, paddingLeft: 10}}>活动参加者填写的信息</div>
              </div>
                <div style={{marginTop: 10, paddingLeft: 20}}>{InfoRender()}</div>
              <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 10}}>
                <div style={{width: 5, height: 20, borderRadius: 5, background: '#1a257a'}}></div>
                <div style={{fontSize: 16, fontWeight: 700, paddingLeft: 10}}>补充项目</div>
              </div>
              <div style={{paddingLeft: 20}}>项目名称: {addItems()}</div>
            </Panel>
             </Collapse>
             : ''
      }
      {
          votes.length
          ? <Collapse
                  bordered={false}
                  className="site-collapse-custom-collapse"
                  expandIcon={({ isActive }) => (
              <CaretRightOutlined rotate={isActive ? 90 : 0} />
            )}
                  expandIconPosition="right"
                  ghost
            >
            <Panel
                className="site-collapse-custom-panel"
                header={<b style={{fontSize: '20px'}}>投票</b>}
                key="1"
            >
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{width: 5, height: 20, borderRadius: 5, background: '#1a257a'}}></div>
                <div style={{fontSize: 16, fontWeight: 700, paddingLeft: 10}}>基本信息</div>
              </div>
              <div style={{padding: '5px 0 0 20px' }}>
                <p>活动时间: &nbsp;&nbsp; {votes[0].startDate || ''} ~ {votes[0].endDate || ''}</p>
                <p>投票方式: &nbsp;&nbsp; {votes[0].voteWay == 1 ? '每日投一次': '每日可多投' || ''} </p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{width: 5, height: 20, borderRadius: 5, background: '#1a257a'}}></div>
                <div style={{fontSize: 16, fontWeight: 700, paddingLeft: 10}}>投票对象</div>
              </div>
                <div style={{marginTop: 10, paddingLeft: 20}}>
                  {voteObj()}
                </div>
            </Panel>
          </Collapse>
          : ''
      }
    </>
  );
}
